import { OperateBase } from '../../common/operate-base';
import './vertical.less';
import { NFont } from '../../../types/style.interface';
import { FontStylePlugin } from '../../../pugins/font-style.plugin';

// <div class="z-tools-icon icon iconfont icon-align-left"></div>
export class FontVertical extends OperateBase {
    protected container: HTMLElement;
    protected fontStylePlugin: FontStylePlugin;
    protected iconMap: {[key: string]: number} = {
        'icon-vertical-align-top':0,
        'icon-vertical-align-middl':1,
        'icon-vertical-align-botto':2
    }
    constructor() {
        super();
    }
    public afterDomInit(): void {
        this.zTableInstance.getHook().afterSelect.add((val) => {
            this.toggleDisabled(val !== null);
            this.disabled = val === null;
        });
        this.fontStylePlugin = this.zTableInstance.pluginManager.getPlugin(FontStylePlugin.pluginName);
        this.toggleDisabled(false);
    }
    protected toggleDisabled(isDisabled: boolean) {
        let ele: HTMLElement = this.container.querySelector('.iconfont');
        this.disabled = !isDisabled;
        let btn: HTMLElement = this.container.querySelector('.z-tools-btn');
        if(!isDisabled) {
            ele.classList.add('z-table-icon-disabled');
            btn.classList.add('z-drop-down-disabled');
        } else {
            ele.classList.remove('z-table-icon-disabled');
            btn.classList.remove('z-drop-down-disabled');
        }
    }
    public selectChange() {

    }
    public getDom() {
        this.container = document.createElement('div');
        this.container.setAttribute('class', this.containerClassName);
        this.container.innerHTML=`
            <div class="z-table-tools-font-h">
                <div class="z-tools-btn">
                    <div class="z-tools-icon icon iconfont icon-vertical-align-top"></div>
                    <div class="icon-down"></div>
                </div>
                <div class="vertical">
                    <div class="font-h-item" z-item-value="${NFont.EVertical.top}">
                        <div class="z-tools-icon icon iconfont icon-vertical-align-top"></div>
                    </div>
                    <div class="font-h-item" z-item-value="${NFont.EVertical.middle}">
                        <div class="z-tools-icon icon iconfont icon-vertical-align-middl"></div>
                    </div>
                    <div class="font-h-item" z-item-value="${NFont.EVertical.bottom}">
                        <div class="z-tools-icon icon iconfont icon-vertical-align-botto"></div>
                    </div>
                </div>
            </div>
        `;
        let tpl: any = document.createDocumentFragment();
        tpl.appendChild(this.container);
        let optionContainer = this.container.querySelector('.vertical') as HTMLElement;
        let optionsNodes = this.container.querySelectorAll('.font-h-item')
        optionsNodes.forEach(item => {
            ((item) => {
                item.addEventListener('click', (e) => {
                    this.changeActive(Number(item.getAttribute('z-item-value')));
                    optionContainer.style.display = 'none';
                    e.stopPropagation();
                    e.preventDefault();
                });
            })(item);
        });
        document.addEventListener('click', () => {
            optionContainer.style.display = 'none';
        });
        // console.log(this.container.querySelector('.font-h-item'));
        this.container.querySelector('.icon-down').addEventListener('click', (e) => {
            optionContainer.style.display = 'block';
            e.stopPropagation();
            e.preventDefault();
        });
        return tpl;
    }
    protected changeActive(val: NFont.EVertical) {
        this.fontStylePlugin.excute({vertical: val});
        // let iconEle = this.container.querySelector('.z-tools-icon').classList;
        // let activeKey = '';
        // for(let key in this.iconMap) {
        //     iconEle.remove(key);
        //     if(this.iconMap[key] === val) {
        //         activeKey = key;
        //     }
        // }
        // iconEle.add(activeKey);
        // let optionsNodes = this.container.querySelectorAll('.font-h-item');
        // optionsNodes.forEach(item => {
        //     if(Number(item.getAttribute('z-item-value')) === val) {
        //         item.classList.add('font-h-item-active');
        //     } else {
        //         item.classList.remove('font-h-item-active');
        //     }
        // })
    }
}